<template>
  <page-header-wrapper>
    <template v-slot:content>
      <div>
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="5" :sm="24" style="padding-right: 5px">
                <a-form-item label="模型名称">
                  <a-input-search @search="searchForm" v-model="form.form_name" />
                </a-form-item>
              </a-col>
              <a-col :md="5" :sm="24" style="padding-left: 5px">
                <a-button type="primary" @click="visible = true">添加表单模型</a-button>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <a-table
          :columns="columns"
          :data-source="data"
          bordered
          :rowKey="record=>record.form_id"
          :pagination="pagination"
        >
          <template slot="operation" slot-scope="text, record">
            <router-link target="_blank" style="float: left; margin-right: 10px;" :to="{path: `form_field/${record.form_id}`}">查看表字段</router-link>
            <a @click="bindModel(record)" style="float: left; margin-right: 10px;">设置绑定模型</a>
            <div class="editable-row-operations">
              <a-popconfirm :title="$t('form.basic-form.confirm.delete')" @confirm="() => del(record)">
                <a>删除</a>
              </a-popconfirm>
            </div>
            <router-link target="_blank" style="float: left; margin-right: 10px;" :to="{path: `info_list/${record.form_id}/${record.title_field}`}">查看表单内容列表</router-link>
          </template>
        </a-table>
      </div>
    </template>
    <a-modal v-model="visible" title="编辑框" ok-text="确认" cancel-text="取消" @ok="_addForm">
      <a-form-item
      >
        模型名称：
        <a-input
          v-model="add.form_name"
        />
      </a-form-item>
    </a-modal>
    <a-modal v-model="bindVisible" title="编辑框" ok-text="确认" cancel-text="取消" @ok="bindModel">
      <a-form-item
      >
        选择模型：
        <a-select
          show-search
          :value="bindForm.form_name"
          placeholder="input search text"
          style="width: 100%"
          :default-active-first-option="false"
          :filter-option="false"
          :not-found-content="null"
          @search="fetchModel"
          @change="handleChange"
        >
          <a-select-option v-for="item in selectList" :key="item.form_name">
            {{ item.form_name }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import {
  getForm,
  addForm,
  delForm,
  bindForm
} from '@/api/form'
import { PageHeaderWrapper } from '@ant-design-vue/pro-layout'
const columns = [
  {
    title: 'form_id',
    dataIndex: 'form_id',
    width: '10%',
    scopedSlots: { customRender: 'form_id' }
  },
  {
    title: 'form_name',
    dataIndex: 'form_name',
    width: '15%',
    scopedSlots: { customRender: 'form_name' }
  },
  {
    title: 'title_field',
    dataIndex: 'title_field',
    width: '15%',
    scopedSlots: { customRender: 'title_field' }
  },
  {
    title: 'bind_model',
    dataIndex: 'form_bind_model',
    width: '15%',
    scopedSlots: { customRender: 'form_bind_model' }
  },
  {
    title: 'operation',
    dataIndex: 'operation',
    width: '25%',
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
  data () {
    return {
      data: [],
      visible: false,
      // 绑定模型对话框
      bindVisible: false,
      columns,
      editingKey: '',
      form: {
        page: 1,
        form_name: ''
      },
      add: {
        form_name: ''
      },
      // 下拉框搜索
      bindForm: {
        page: 1,
        form_name: '',
        form_id: ''
      },
      // 下拉框模型列表
      selectList: [],
      pagination: {
        total: 0,
        onChange: (page) => {
          this.form.page = page
          this.searchForm()
        }
      }
    }
  },
  components: {
    PageHeaderWrapper
  },
  mounted () {
    this.searchForm()
  },
  watch: {
    visible (val) {
      if (val) {
        this.add = {
          form_name: ''
        }
      }
    }
  },
  methods: {
    searchForm () {
      getForm(this.form).then(res => {
        this.data = res.items
        this.pagination.total = res.count ? res.count : 0
      })
    },
    _addForm () {
      if (!/^[a-zA-Z]+$/.test(this.add.form_name)) {
        this.$message.error('表单模型只能是 英文字母')
        return
      }
      addForm(this.add).then(res => {
        if (res.code !== 200) {
          this.$message.warning(res.msg)
          return
        }
        if (!this.add.form_id) {
          res.items.form_id = res.items.id
          this.data.push(res.items)
        }
      })
      this.visible = false
    },
    del (data) {
      delForm(data).then(res => {
        this.searchForm()
      })
    },
    bindModel (data) {
      if (this.bindVisible) {
        bindForm(this.bindForm).then(res => {
          if (res.code !== 200) {
            this.$message.warning(res.msg)
            return
          }
          this.bindVisible = false
          this.searchForm()
        })
        return
      }
      this.bindForm.form_id = data.form_id
      this.selectList = this.data
      this.bindVisible = true
    },
    // 搜索模型
    fetchModel (value) {
      // code...
      this.bindForm.form_name = value
      getForm(this.bindForm).then(res => {
        this.selectList = res.items
      })
    },
    // 下拉框变更
    handleChange (value) {
      // code ..
      this.bindForm.form_name = value
    }
  }
}
</script>
<style scoped>
</style>
